<template>
	<view class="cu-modal bottom-modal" :class="modalName=='bottomModal' ? 'show':''"
		@touchmove.stop.prevent="()=>{return}" @tap="hideModal">	
		<view class="cu-dialog pay" @tap.stop style="background: transparent;" :style="{'max-height':screenHeight,'min-height':screenHeight}">
			<view>
				<view style="height:50upx;width:100%;z-index:999;"></view>
				<view class="cu-bar bg-white " style="height:180upx;position:relative">
					<!-- 标题信息 -->
					<view style="height:180upx;width:100%;">
						<view class="flex p-xs mb-sm" style="height:160upx">
							<view class="flex-sub radius"
								style="height:160upx;padding-left:20upx;margin-top:-50upx;z-index:1888;">
								<image :class="{'bg-white':!paid.icon}" style="width:200upx;height:200upx;border-radius: 10rpx ;background: white;"
									:src="paid.icon" mode="aspectFill"></image>
							</view>
							<view class="flex-twice " style="margin-top:20upx;text-align: left;">
								<view class="text-xxl text-red">{{paid.currencyUnit}}{{paid.calculateAmount||''}}</view>
								<view class="text-gray textOmitted_two">
									<!-- 套餐升级 -->
									<text v-if="paid.up">{{$t('JLink.buy.up')}}：</text>
									<!-- 新购套餐 -->
									<text v-else>{{$t('JLink.buy.new')}}: </text>
									{{paid.label}}
								</view>
							</view>
						</view>
					</view>
					<!-- 关闭图标 -->
					<view class="action" style="position:relative;top:-42upx">
						
						<text @tap="hideModal" class="cuIcon-close text-grey"></text>
					</view>
				</view>
				<scroll-view :scroll-y="true" scroll-with-animation="true" :enable-back-to-top="true" :scroll-top="0" 
									:style="[{height:scrollHeight,background:'#fff'}]">
				    <view>
                        <!-- 规格 -->
                        <specificationList v-if="!paid.isSpecifications" :specifications="specifications" :urlParams="urlParams" :buyNum="urlParams.classifyId&&urlParams.classifyId!='net.cellular' ? paid.buyNum : paid.id" @selectBuyNum="selectBuyNum"></specificationList>
                        <!-- 原套餐抵扣-->
                        <j-uni-list :message="{title:$t('JLink.order.details.message.balance'),value:paid.balanceAmount ? `-${paid.currencyUnit}${paid.balanceAmount}` :''}"></j-uni-list>
                        <!-- 平台优惠 -->
                        <j-uni-list :message="{title:$t('JLink.order.details.message.discount'),value: paid.discountAmount ? `-${paid.currencyUnit}${paid.discountAmount}` : ''}"></j-uni-list>
                        <!-- 优惠券 -->
                        <j-uni-list
                            v-if="!isIccid"
                            :message="{title:$t('JLink.coupon.coupon'),value:!paid.coupons||paid.coupons.length===0 ? $t('JLink.coupon.NoAvailable') : paid.useCouponId==-1 ? `${paid.coupons.length}${$t('JLink.coupon.available')}`: paid.selectCouponVal}"
                            :arrow="paid.coupons&&paid.coupons.length>0"
                            :messageType="paid.MaxVal&&paid.useCouponAmount===paid.MaxVal ? 'coupon' : ''"
                            :vaueStyle="!paid.coupons||paid.coupons.length===0 ? 'font-size:24upx;color:#aaa': paid.useCouponId==-1 ? 'font-size:24upx;color:#1cbbb4':'font-size:30upx;'"
                            @click="selectCoupon"></j-uni-list>
                        <!-- 积分抵扣 -->
                        <j-uni-list
                            v-if="paid.integral&&paid.integral.changeAmount"
                            :message="{title:$t('JLink.integral.deduct'),value:paid.usingIntegral ? `-${paid.currencyUnit}${paid.integral.changeAmount}` : `-${paid.currencyUnit}0.00`}"
                            :arrow="true"
                            @click="selectIntegral"></j-uni-list>
                        <!-- 实际付款-->
                        <j-uni-list :message="{title:$t('JLink.buy.payAmount'),value:paid.payAmount ? `${paid.currencyUnit}${paid.payAmount}` : ''}"></j-uni-list>

                    </view>
                </scroll-view>
				<!-- 支付提交 automaticPayment:true表示自动续费-->
				<submit-button :country="country" :message="{payType:paid.automaticPayment ? 1 : payType[0] ,payAmount:paid.payAmount,currencyUnit:paid.currencyUnit}" @submit="handleSubmit"></submit-button>
			</view>
		</view>
	</view>
</template>

<script>
import {getGlobalProperties} from '@/utils/globalProperties.js'
import submitButton from '../submit/submit'
import specificationList from '../specifications/specifications'
const {screenHeightModal}=getGlobalProperties()
export default {
    components:{submitButton,specificationList},
 	props:{
		modalName:{
		  type:String,
		  default:''
		},
		payType:{
		  type:Array,
		  default:()=>{
			return []
		  }
		},
		paid:{
		  type:Object,
		  default:()=>{
			return{
			  icon:'',//图片
			  currencyUnit:'',//金钱符号
			  price:'',//价格
			  up:false,//是否套餐升级
			  automaticPayment:false,//是否自动续费
			}
		  }
        },
		urlParams:{
		  type:Object,
		  default:()=>{
			return {
			  deviceId: '',
			  channel: '',
			  classifyId: ''
			}
		  }
        },
		// 规格
		specifications:{
		  type:Array,
		  default:()=>{
			return []
		  }
		},
		// 国家
		country:{
		  type:String,
		  default:''
		},
		isIccid:{
		  type:Boolean,
		  default:false
		}
	},
	data() {
	    return {
			screenHeight: screenHeightModal-480+'rpx',
			scrollHeight: screenHeightModal-480-230-92+'rpx',
			loading:false,
			// paid:{}
		}
	},
	// watch:{
	// 	paid:{
	// 		handler(newVal){
	// 			// this.loading=true
				
	// 			// this.paid=newVal
	// 			// this.loading=false
	// 		}
	// 	}
	// },
	methods: {
		// 下订单
		payClick(payType){
			this.$emit('payClick',payType,this.paid,this.urlParams)
		},
		// 支付提交
		handleSubmit(result){
		  const {payType} = result;
			let code;
			let dataEventName;
			switch (this.urlParams.classifyId){
				case 'xmc.css':
					code='603061'
					dataEventName='xmcCss_goods_pay'
					break;
				case 'xmc.voes':
					code='603064'
					dataEventName='xmcVoes_goods_pay'
					break;
				case 'pms.voes':
					code='603067'
					dataEventName='pmsVoes_goods_pay'
					break;
				case 'pms.sms':
					code='603070'
					dataEventName='pmsSms_goods_pay'
					break;
				case 'net.cellular':
					code='603073'
					dataEventName='netCellular_goods_pay'
					break;
			}
			this.$postPointData({code, dataEventName})
		  // 下单
		  this.payClick(payType)
		},
		// 支付时长选择
		selectBuyNum (paid){
		  this.$emit('selectBuyNum',paid)
		},
		hideModal(){
		   this.$emit('goodsClick',this.paid,'close')
		},
			// 优惠券选择
		selectCoupon (){
		  this.$emit('selectCoupon')
		},
			// 积分选择
		selectIntegral (){
		  this.$emit('selectIntegral')
		}
    }
}
</script>

<style lang="less">
	@import '@/common/style/main.css';
</style>
